<template>
	<div class="myTabbarItemWrap" :class="{'active': active,'nowPrevIndex':nowPrevIndex}" @click="handleClick">
		<div class="tabbarItemCon">
			<slot></slot>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		data () {
			return {
				nowPrevIndex:false,
				active: false
			}
		},
		mounted (){

        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
			handleClick() {
				this.$emit('click')
			}
		}
	}
</script>
<style type="text/css" lang="less">
	.myTabbarItemWrap{
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 12px;
		line-height: 1;
		cursor: pointer;
		position: relative;
		left:0;
		top:0;
		img{
			width: 16px;
   			margin-right: 3px;
			vertical-align: middle;
		}
		span{
			font-size:14px;
			vertical-align: middle;
		}
    }
	.myTabbarItemWrap::after{
		content: "";
		height: 20px;
		width: 1px;
		background: white;
		position: absolute;
		right: 0;
	}
	.myTabbarItemWrap:last-child::after{
		display:none;
	}
	.myTabbarItemWrap.active{
		background: white;
		span{
			color:#1989fa;
		}
	}
	.myTabbarItemWrap.nowPrevIndex::after{
		display:none;
	}
	.myTabbarItemWrap.active::after{
		display:none;
	}
	.myTabbarItemWrap:first-child.active{
		border-top-left-radius:5px;
	}
	.myTabbarItemWrap:last-child.active{
		border-top-right-radius:5px;
	}
	.tabbarItemCon{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.myTabbarItemWrap.active .tabbarItemCon{
		border-bottom:2px solid #1989fa;
	}
</style>